
import React from 'react'
import {Layout,Row,Col,Card,Form, Icon, Input, Button,Select,  Checkbox,Modal,message,Spin 	} from 'antd'
import PureRenderMixin from 'react-addons-pure-render-mixin'
import MMUtile from 'util/mm.jsx'
import User from 'service/user-service.jsx'
import logosm from 'img/logo.jpg'
import FooterMsg from 'component/footermsg/index.jsx'

const { Header, Content, Footer, Sider } = Layout; 
const FormItem = Form.Item;
const Option = Select.Option;
const _mm = new MMUtile();
const _user = new User();
import './style.css'


class UserRegisterForm extends React.Component{ 
	constructor(props){
		super(props);
		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
		this.state={
			confirmDirty: false,
			visible:false,
			CodeValue:'获取验证码',
			canGetCode:true,
			phone:'',
			codenum:120,
			captcha:'',
			redirect:_mm.getUrlParam('redirect') || '/',
			loading:false,
			nickname:'',
			isComponent:false//用户名校验未完成
		}
	}

  showModal() {
	  Modal.info({
	    title: '注册协议',
	    width:'760px',
	    content: (
	      <div style={{height:'300px','overflowY':'auto'}}>
	        <div>您在使用润农科技提供的各项服务之前，请您务必审慎阅读、充分理解本协议各条款内容，并选择接受或不接受本协议，注册成功及使用行为即表示您已充分阅读、理解并接受本协议的全部内容，并自愿接受本协议各项条款的约束。</div>
<div>一、总则</div>
<div>1．1　用户应当同意本协议的条款并按照页面上的提示完成全部的注册程序。用户在进行注册程序过程中点击"同意"按钮即表示用户与润农科技达成协议，完全接受本协议项下的全部条款。</div>
<div>1．2　用户注册成功后，润农科技将给予每个用户一个用户帐号及相应的密码，该用户帐号和密码由用户负责保管；用户应当对以其用户帐号进行的所有活动和事件负法律责任。</div>
<div>1．3　用户一经注册润农科技帐号，用户有权利用该帐号使用润农科技各项服务，当用户使用润农科技各项服务时，用户的使用行为视为其对该项服务的服务条款以及润农科技在该项服务中发出的各类公告的同意。</div>
<div>1．4　润农科技服务协议以及各项服务条款和公告可由润农科技定时更新，并予以公示。您在使用相关服务时,应关注并遵守其所适用的相关条款。</div>
<div>二、注册信息和隐私保护</div>
<div>2．1　润农科技帐号（即用户ID）的所有权归润农科技，用户按注册页面引导填写信息，阅读并同意本协议且完成全部注册程序后，即可获得润农科技帐号并成为用户。用户应提供及时、详尽及准确的个人资料，并不断更新注册资料，符合及时、详尽准确的要求。所有原始键入的资料将引用为注册资料。如果因注册信息不真实或更新不及时而引发的相关问题，润农科技不负任何责任。用户应当通过真实身份信息认证注册帐号，且用户提交的帐号名称、头像和简介等注册信息中不得出现违法和不良信息，经润农科技审核，如存在上述情况，润农科技将不予注册；同时，在注册后，如发现用户以虚假信息骗取帐号名称注册，或其帐号头像、简介等注册信息存在违法和不良信息的，润农科技有权不经通知单方采取限期改正、暂停使用、注销登记、收回等措施。</div>
<div>2．2　润农科技帐号包括帐户名称和密码，您可使用设置的帐户名称和密码登录；在帐号使用过程中，为了保障您的帐号安全基于不同的终端以及您的使用习惯，我们可能采取不同的验证措施识别您的身份。</div>
<div>2．3　用户不应将其帐号、密码转让、出售或出借予他人使用，若用户授权他人使用帐户，应对被授权人在该帐户下发生所有行为负全部责任。由于帐号关联用户使用信息，仅当依法律法规、司法裁定或经润农科技同意，并符合润农科技规定的用户帐号转让流程的情况下，方可进行帐号的转让。</div>
<div>2．4　因您个人原因导致的帐号信息遗失，如需找回润农科技帐号信息，请按照润农科技帐号找回要求提供相应的信息，并确保提供的信息合法真实有效，若提供的信息不符合要求，无法通过润农科技安全验证，润农科技有权拒绝提供帐号找回服务；若帐号的唯一凭证不再有效，润农科技有权拒绝支持帐号找回。</div>
<div>2．5　在需要终止使用润农科技帐号服务时，符合以下条件的，您可以申请注销您的润农科技帐号。</div>
<div>（1）您仅能申请注销您本人的帐号，并依照润农科技的流程进行注销；</div>
<div>（2）您仍应对您在注销帐号前且使用润农科技服务期间的行为承担相应责任，同时润农科技仍可保存您注销前的相关信息；</div>
<div>（3）注销成功后，帐号信息、个人身份证信息、交易记录、会员权益等将无法恢复或提供；</div>
<div>2．6　当您使用润农科技产品进行支付、登录等操作的时候，服务器会自动接收、验证、并记录一些必要的信息，如手机号码、IP地址、服务访问异常信息、以及部分设备信息等，以保障您在使用润农科技服务时账户登录和支付过程的安全，进而保护您的上网安全。您使用润农科技的服务，即表示您同意润农科技可以按照相关的隐私权政策处理您的个人信息。</div>
<div>2．7　在如下情况下，润农科技可能会披露您的信息:</div>
<div>（1）事先获得您的授权；</div>
<div>（2）您使用共享功能；</div>
<div>（3）根据法律、法规、法律程序的要求或政府主管部门的强制性要求；</div>
<div>（4）以学术研究或公共利益为目的；</div>
<div>（5）为维护润农科技有限公司的合法权益，例如查找、预防、处理欺诈或安全方面的问题；</div>
<div>（6）符合相关服务条款或使用协议的规定。</div>
<div>三、使用规则
<div>3．1　用户在使用润农科技的服务时，必须遵守《网络安全法》、《互联网新闻信息服务管理规定》等中华人民共和国相关法律法规的规定，用户应同意将不会利用本服务进行任何违法或不正当的活动，包括但不限于下列行为:</div>
<div>（1）上载、展示、张贴、传播或以其它方式传送含有下列内容之一的信息：</div>
<div>　　1）反对宪法所确定的基本原则的；</div>
<div>　　2）危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；</div>
<div>　　3）损害国家荣誉和利益的；</div>
<div>　　4）煽动民族仇恨、民族歧视、破坏民族团结的；</div>
<div>　　5）破坏国家宗教政策，宣扬邪教和封建迷信的；</div>
<div>　　6）散布谣言，扰乱社会秩序，破坏社会稳定的；</div>
<div>　　7）散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；</div>
<div>　　8）侮辱或者诽谤他人，侵害他人合法权利的；</div>
<div>　　9）含有虚假、有害、胁迫、侵害他人隐私、骚扰、侵害、中伤、粗俗、猥亵、或其它道德上令人反感的内容；</div>
<div>　　10）含有中国法律、法规、规章、条例以及任何具有法律效力之规范所限制或禁止的其它内容的；</div>
<div>（2）不得为任何非法目的而使用网络服务系统；</div>
<div>（3）不利用润农科技的服务从事以下活动：</div>
<div>　　1) 未经允许，进入计算机信息网络或者使用计算机信息网络资源的；</div>
<div>　　2) 未经允许，对计算机信息网络功能进行删除、修改或者增加的；</div>
<div>　　3) 未经允许，对进入计算机信息网络中存储、处理或者传输的数据和应用程序进行删除、修改或者增加的；</div>
<div>　　4) 故意制作、传播计算机病毒等破坏性程序的；</div>
<div>　　5) 其他危害计算机信息网络安全的行为。</div>
<div>3．2　用户违反本协议或相关的服务条款的规定，导致或产生的任何第三方主张的任何索赔、要求或损失，包括合理的律师费，您同意赔偿润农科技与合作公司、关联公司，并使之免受损害。对此，润农科技有权视用户的行为性质，采取包括但不限于删除用户发布信息内容、暂停使用许可、终止服务、限制使用、回收润农科技帐号、追究法律责任等措施。对恶意注册润农科技帐号或利用润农科技帐号进行违法活动、捣乱、骚扰、欺骗、其他用户以及其他违反本协议的行为，润农科技有权回收其帐号。同时，润农科技会视司法部门的要求，协助调查。</div>
<div>3．3　用户须对自己在使用润农科技服务过程中的行为承担法律责任。用户承担法律责任的形式包括但不限于：对受到侵害者进行赔偿，以及在润农科技首先承担了因用户行为导致的行政处罚或侵权损害赔偿责任后，用户应给予润农科技等额的赔偿。</div>
<div>3．4　用户在使用润农科技服务时遵守以下互联网底线：</div>
<div>　　1）法律法规底线</div>
<div>　　2）社会主义制度底线</div>
<div>　　3）国家利益底线</div>
<div>　　4）公民合法权益底线</div>
<div>　　5）社会公共秩序底线</div>
<div>　　6）道德风尚底线</div>
<div>　　7）信息真实性底线</div>
<div>四、服务内容</div>
<div>4．1　润农科技服务的具体内容由润农科技根据实际情况提供。</div>
<div>4．2　除非本服务协议另有其它明示规定，润农科技所推出的新产品、新功能、新服务，均受到本服务协议之规范。</div>
<div>4．3　为使用本服务，您必须能够自行经有法律资格对您提供互联网接入服务的第三方，进入国际互联网，并应自行支付相关服务费用。此外，您必须自行配备及负责与国际联网连线所需之一切必要装备，包括计算机、数据机或其它存取装置。</div>
<div>4．4　鉴于网络服务的特殊性，用户同意润农科技有权不经事先通知，随时变更、中断或终止部分或全部的网络服务（包括收费网络服务）。润农科技不担保网络服务不会中断，对网络服务的及时性、安全性、准确性也都不作担保。</div>
<div>4．5　免责声明：因以下情况造成网络服务在合理时间内的中断，润农科技无需为此承担任何责任；</div>
<div>（1）润农科技需要定期或不定期地对提供网络服务的平台或相关的设备进行检修或者维护，润农科技保留不经事先通知为维修保养、升级或其它目的暂停本服务任何部分的权利。</div>
<div>（2）因台风、地震、洪水、雷电或恐怖袭击等不可抗力原因；</div>
<div>（3）用户的电脑软硬件和通信线路、供电线路出现故障的；</div>
<div>（4）因病毒、木马、恶意程序攻击、网络拥堵、系统不稳定、系统或设备故障、通讯故障、电力故障、银行原因、第三方服务瑕疵或政府行为等原因。</div>
<div>尽管有前款约定，润农科技将采取合理行动积极促使服务恢复正常。</div>
<div>4．6　本服务或第三人可提供与其它国际互联网上之网站或资源之链接。由于润农科技无法控制这些网站及资源，您了解并同意，此类网站或资源是否可供利用，润农科技不予负责，存在或源于此类网站或资源之任何内容、广告、产品或其它资料，润农科技亦不予保证或负责。因使用或依赖任何此类网站或资源发布的或经由此类网站或资源获得的任何内容、商品或服务所产生的任何损害或损失，润农科技不承担任何责任。</div>
<div>4．7　用户明确同意其使用润农科技网络服务所存在的风险将完全由其自己承担。用户理解并接受下载或通过润农科技服务取得的任何信息资料取决于用户自己，并由其承担系统受损、资料丢失以及其它任何风险。</div>
<div>4．8　润农科技有权于任何时间暂时或永久修改或终止本服务（或其任何部分），而无论其通知与否，润农科技对用户和任何第三人均无需承担任何责任。</div>
<div>4.9在润农科技未向用户收取相关服务费用的情况下，润农科技可自行全权决定以任何理由（包括但不限于润农科技认为用户已违反本协议，或用户超过一定期限未登录润农科技等情况）终止对用户的服务，并不再保存用户在润农科技的全部资料，而无需通知该用户。服务终止后，润农科技没有义务为用户保留原用户资料或与之相关的任何信息，或转发任何未曾阅读或发送的信息给用户或第三方。如用户向润农科技提出注销注册用户身份，需经润农科技有限公司审核同意，由润农科技注销该注册用户，用户即解除与润农科技的协议关系，但润农科技仍保留下列权利：</div>
<div>（1）用户注销后，润农科技有权保留该用户的资料，包括但不限于用户注册信息、交易记录等；</div>
<div>（2）用户注销后，如用户在注销前在润农科技存在违法行为或违反本协议的行为，润农科技仍可行使本协议所规定的权利。</div>
<div>4.10如存在下列情况，润农科技有限公司可以通过注销用户的方式终止服务：</div>
<div>（1）根据润农科技所掌握的事实依据，可以认定用户存在违法、违反本协议相关规定或其他的不当行为；</div>
<div>（2）润农科技发现用户注册信息中主要内容是虚假的；</div>
<div>（3）其它润农科技认为需终止服务的情况。</div>
<div>五、知识产权和其他合法权益（包括但不限于名誉权、商誉权）</div>
<div>5.1 所有出现在润农科技上的内容，包括但不限于作品、图片、档案、资料、网站构架、网站版面的安排、网页设计、软件、经由润农科技呈现的推广信息或资讯，均由润农科技或相关权利人依法享有相应知识产权（包括但不限于著作权、商标权、专利权或其它专属权利等），用户仅在符合使用目的的前提下被许可浏览和使用润农科技。未经润农科技或相关权利人明示授权，用户不得复制、修改、出租、出借、出售、传送、删除、添加润农科技的内容，或根据上述网站资料和资源制作成任何种类物品。</div>
<div>5.2 润农科技授予用户不可转移及非专属的使用权，用户可以通过手机使用润农科技的目标代码（以下简称“软件”），但不得自行或许可任何第三方，复制、修改、创作衍生作品、进行还原工程、反向组译，或以其它方式破译或试图破译源代码，或出售、转让“软件”或对“软件”进行再授权，或以其它方式移转“软件”之任何权利。用户同意不以任何方式修改“软件”，或使用修改后的“软件”。</div>
<div>六、其他</div>
<div>6．1　本协议的订立、执行和解释及争议的解决均应适用中华人民共和国法律。</div>
<div>6．2　如双方就本协议内容或其执行发生任何争议，双方应尽量友好协商解决；协商不成时，任何一方均可提起诉讼。</div>
<div>6．3　润农科技未行使或执行本服务协议任何权利或规定，不构成对前述权利或权利之放弃。</div>
<div>6．4　如本协议中的任何条款无论因何种原因完全或部分无效或不具有执行力，本协议的其余条款仍应有效并且有约束力。</div>
<div>7．5　欢迎您使用润农科技的各项服务，并在本协议基础上，同时遵守单项服务协议的具体约定。 </div>
</div>
	      </div>
	    ),
	    onOk() {},
	  });
  }
  handleSubmit(e){
    e.preventDefault();
    this.setState({
    	loading:true
    })
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
      	_user.register({
					username:values.nickname,
					password:values.password,
					phone:values.phone,
					code:values.captcha
				}).then((res)=>{
					message.success('恭喜您，注册成功！');
					if(this.timer){
			        clearTimeout(this.timer);
			    }
			    this.setState({
			    	loading:false
			    })
					this.props.history.push(this.state.redirect);
				},(errMsg)=>{
			    this.setState({
			    	loading:false
			    })
					_mm.errorTips(errMsg);
				})
      }else{
		    this.setState({
		    	loading:false
		    })
      }
    });
  }
  handleConfirmBlur(e){
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  }
  //校验用户名
  checkNickName(e){
    const form = this.props.form;
    const nickname = form.getFieldValue('nickname');
  	if(!this.state.isComponent){
			_user.checkUserName({
				username:nickname
			}).then((res)=>{
	      message.success('用户名可用');
	      this.setState({
	      	isComponent:true
	      })

	    },(errMsg)=>{
	      _mm.errorTips(errMsg);
				form.setFields({'nickname':''})
	      this.setState({
	      	nickname:'',
	      	isComponent:false
	      })
	    })
  	}
		
  }
  checkPhone(rule, value, callback){
    const form = this.props.form;
    const phone = form.getFieldValue('phone')
    if(!(/^1[34578]\d{9}$/.test(phone))){ 
        callback("手机号码有误，请重填");  
    }  else {
    	//将手机验证码变为可用
    	this.setState({
    		canGetCode:false
    	})
      callback();
    }
  }
  checkPassword(rule, value, callback){
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('确认密码需要与上面输入的密码保持一致!');
    } else {
      callback();
    }
  }
  checkConfirm(rule, value, callback){
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  }
  //点击验证码事件
  getHandleCode(rule, value, callback){
    const form = this.props.form;
    const phone = form.getFieldValue('phone');
  	//校验手机号是否重复
  	_user.checkPhone({
			phone:phone
  	}).then((res)=>{
	  	//发送短信验证码接口
	  	_user.sendSMS({
				phone:phone
			}).then((res)=>{
	      message.success('请在手机上接收并填写验证码');
	    },(errMsg)=>{
	      _mm.errorTips(errMsg);
	      
	    })

	  	//如果不重复将倒数120秒在按钮上显示
	  	if(this.timer){
	        clearTimeout(this.timer);
	    }
	  	this.timer = setInterval(()=>{
	  		if(this.state.codenum ===0){
	  			//倒数到0，将按钮变为可用
	  			this.setState({
						CodeValue:'获取验证码',
						canGetCode:false,
						codenum:120
					})
					clearTimeout(this.timer);
	  		}else{
	  			//倒数期间，将按钮变为禁用
					this.setState({
						CodeValue:this.state.codenum--+'秒',
						canGetCode:true
					})
	  		}

	  	},1000);
  	//并禁用验证码按钮
    },(errMsg)=>{
      _mm.errorTips(errMsg)
    })
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 14,
          offset: 6,
        },
      },
    };
    const prefixSelector = getFieldDecorator('prefix', {
      initialValue: '86',
    })(
      <Select className="icp-selector">
        <Option value="86">+86</Option>
      </Select>
    );
    let winheight =document.body.clientHeight;
    let margintop = (winheight-620)>0?(winheight-620)/2:0;
		return(
			<Spin spinning={this.state.loading} size="large">
			<Layout  className="layoutbox">
				<Header  className="headerbox" >
	        <Row >
	          <Col span={24}><img width={300} src={logosm} /></Col>
	        </Row>
	      </Header>	
	      <Layout className="layoutbox">
	        <Content className="containerbox" style={{height:winheight-220}}>
	        	<Row style={{marginTop:margintop}}>
	        		<Col span={12}offset={6}>
								<Form onSubmit={(e)=>{this.handleSubmit(e)}}> 
									<FormItem
					          {...formItemLayout}
					          label={(
					            <span>
					              用户名
					            </span>
					          )}
					          hasFeedback
					        >
					          {getFieldDecorator('nickname', {
					            rules: [{ required: true, message: '请输入您的用户名!' }],
					            value: this.state.nickname,
					          })(
					            <Input onBlur={this.checkNickName.bind(this)} />
					          )}
					        </FormItem>	
					        <FormItem
					          {...formItemLayout}
					          label="密码"
					          hasFeedback
					        >
					          {getFieldDecorator('password', {
					            rules: [{
					              required: true, min: 6,message: '密码至少6位字符!',
					            }, {
					              validator: this.checkConfirm.bind(this),
					            }],
					          })(
					            <Input type="password" />
					          )}
					        </FormItem>
					        <FormItem
					          {...formItemLayout}
					          label="确认密码"
					          hasFeedback
					        >
					          {getFieldDecorator('confirm', {
					            rules: [{
					              required: true, message: '请确认密码!',
					            }, {
					              validator: this.checkPassword.bind(this),
					            }],
					          })(
					            <Input type="password" onBlur={(e)=>{this.handleConfirmBlur(e)}} />
					          )}
					        </FormItem>
					       				        
					        <FormItem
					          {...formItemLayout}
					          label="手机号"
					        >
					          {getFieldDecorator('phone', {
					            rules: [{ required: true, message: '请输入您的注册手机号!' }, { validator: this.checkPhone.bind(this) }],
					            initialValue: this.state.phone,
					          })(
					            <Input addonBefore={prefixSelector} />
					          )}
					        </FormItem>
					        <FormItem
					          {...formItemLayout}
					          label="验证码"
					        >
					          <Row gutter={8}>
					            <Col span={12}>
					              {getFieldDecorator('captcha', {
					                rules: [{ required: true, message: '请输入您获取的验证码!' }],
					            		initialValue: this.state.captcha,
					              })(
					                <Input size="large"  />
					              )}
					            </Col>
					            <Col span={12}>
					              <Button size="large" onClick={this.getHandleCode.bind(this)} disabled={this.state.canGetCode}>{this.state.CodeValue}</Button>
					            </Col>
					          </Row>
					        </FormItem>
					        <FormItem {...tailFormItemLayout } style={{ marginBottom: 8 }}>
					          {getFieldDecorator('agreement', {
					          	rules:[{ required: true, message: '请同意注册协议!' }],
					            valuePropName: 'checked'
					          })(
					            <Checkbox>我同意 <a href="javascript:void(0)" onClick={(e)=>{this.showModal(e)}}>注册协议</a>,并保证所填信息真实有效</Checkbox>
					          )}
					        </FormItem>
					        <FormItem {...tailFormItemLayout}>

					          <Button type="primary" htmlType="submit" size="large">注册</Button>
					        </FormItem>
					      </Form>
	        		</Col>
						</Row>
	        </Content>
	      </Layout>
      	<Footer className="layoutfooter"><FooterMsg /></Footer>
    	</Layout>
    	</Spin>
		)
	}
}
const UserRegister = Form.create()(UserRegisterForm);
export default UserRegister;